<template>
  <div class="main-block-5">
    <div class="title">服务器监测</div>
    <div class="server-wrapper">
      <server v-for="(item, index) in servers" :index="index" :data="item"></server>
    </div>
  </div>
</template>

<script>
import Server from './Server'
import {randint, contain} from 'utils/random'

var data = {};
data.servers = [
  {color: 'yellow'},
  {color: 'blue'},
  {color: 'red'},
  {color: 'blue'},
  {color: 'blue'},
  {color: 'blue'},
  {color: 'blue'},
  {color: 'blue'},
]

setInterval(() => {
  for(let item of data.servers){
    if(item.color == 'red'){
      if(randint(3) == 0){
        item.color = 'yellow'
      }
    }else if(item.color == 'yellow'){
      if(randint(6) == 0){
        item.color = randint(2) ? 'blue' : 'red'
      }
    }else{
      if(randint(46) == 0){
        item.color = randint(2) ? 'yellow' : 'red'
      }
    }
  }
}, 1600)

export default {
  name: 'block5',
  components: {Server},
  data(){
    return data;
  }
}
</script>

<style scoped>
.main-block-5{
  position: absolute;
  background-image: url(./img/main-block-5.png);
  background-size: 100% 100%;
  right: 4.17vh;
  bottom: 6.11vh;
  width: 53.15vh;
  height: 32.22vh;
  filter: drop-shadow(0 0 7px #0057b8);
}
.title{
  position: absolute;
  color: #b8fdff;
  font-size: 2.4vh;
  left: 4.6vh;
  top: 2.1vh;
}
.server{
  float: left;
  margin-right: 1.11vh;
  margin-bottom: 1.11vh;
}
.server-wrapper{
  overflow: hidden;
  position: absolute;
  left: 3.43vh;
  top: 7.1vh;
}
</style>
